<script setup>
import { ref } from 'vue'

const text = ref('Hello world!')
const message = ref('')
const checked = ref(true)

const checkedNames = ref([])

const picked = ref('')

const selected = ref([])
const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

</script>

<template>

<input :value="text" @input="event => text = event.target.value">
<hr>
<input v-model="text">
<hr>



<p>Message is:{{ message }}</p>
<input v-model="message" placeholder="edit me">

<hr>

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>

<textarea v-model="message" placeholder="add multiple lines"></textarea>

<hr>

<!-- 错误 -->
<!-- <textarea>{{ text }}</textarea> -->

<!-- 正确 -->
<textarea v-model="text"></textarea>

<hr>

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<hr>

<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<br>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<br>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br>

<hr>


<div> Picked: {{ picked }}</div>
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>


<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<hr>
<br>


<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>


</template>

<style scoped>
hr{
    margin-top:20px
}
</style>